<!--
 * @Author: MarsLay 331412466@qq.com
 * @Date: 2024-01-15 09:50:16
 * @LastEditors: MarsLay 331412466@qq.com
 * @LastEditTime: 2024-01-15 17:48:30
 * @FilePath: \ticket-center\src\pages\common\toLogin.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="main">
    <div class="price part">
      <div class="title">出售单程票</div>
      <div class="list">
        <div @click="toOut(v.title)" class="single" :class="{ 'hide': !v.isShow }" v-for="(v, i) in price" :key="i">￥{{
          v.title }}.00
        </div>
      </div>
    </div>
    <div class="count part">
      <div class="title">选择出售张数</div>
      <div class="select">
        <el-select v-model="count" placeholder="请选择出售张数">
          <el-option v-for="item in countList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="place part">
      <div class="title">查询目的地票价</div>
      <div class="select">
        <el-select v-model="line" placeholder="请选择线路">
          <el-option v-for="item in lineList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="station" placeholder="请选择站点">
          <el-option v-for="item in currentStation" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <div class="price">
          <div class="price-inner">票价：{{ currentPrice }}元</div>
          <div @click="toOut(currentPrice)" class="button">出售</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "toBom",
  data() {
    return {
      price: [{ title: '2', isShow: true }, { title: '3', isShow: true }, { title: '4', isShow: true }, { title: '5', isShow: true }, { title: '6', isShow: true }, { title: '7', isShow: true }, { title: '8', isShow: true }, { title: '9', isShow: true }, { title: '10', isShow: false }, { title: '11', isShow: false }, { title: '12', isShow: false }, { title: '13', isShow: false }, { title: '14', isShow: false }, { title: '15', isShow: false }, { title: '16', isShow: false }],
      countList: [{
        value: '1',
        label: '1'
      },
      {
        value: '2',
        label: '2'
      },
      {
        value: '3',
        label: '3'
      },
      {
        value: '4',
        label: '4'
      },
      {
        value: '5',
        label: '5'
      },
      {
        value: '6',
        label: '6'
      },
      {
        value: '7',
        label: '7'
      },
      {
        value: '8',
        label: '8'
      },
      {
        value: '9',
        label: '9'
      },
      {
        value: '10',
        label: '10'
      },
      {
        value: '15',
        label: '15'
      },
      {
        value: '20',
        label: '20'
      },
      {
        value: '25',
        label: '25'
      },
      {
        value: '30',
        label: '30'
      },
      {
        value: '35',
        label: '35'
      },
      {
        value: '40',
        label: '40'
      },
      {
        value: '45',
        label: '45'
      },
      {
        value: '50',
        label: '50'
      }],
      count: '',
      lineList: [
        {
          value: '轨道交通1号线',
          label: '轨道交通1号线',
          child: [
            {
              value: '站点一',
              label: '站点一',
              price: 4
            },
            {
              value: '站点二',
              label: '站点二',
              price: 40
            }
          ]
        },
        {
          value: '轨道交通2号线',
          label: '轨道交通2号线',
          child: [
            {
              value: '站点三',
              label: '站点三',
              price: 5
            },
            {
              value: '站点四',
              label: '站点四',
              price: 50
            }
          ]
        }
      ],
      line: '轨道交通1号线',
      station: '站点一'
    }
  },
  watch: {
    currentStation: {
      handler(v) {
        this.station = v[0].value;
      },
      deep: true
    }
  },
  computed: {
    currentStation() {
      return this.lineList.find(v => v.value == this.line).child;
    },
    currentPrice() {
      return this.currentStation.find(v => v.value == this.station).price;
    }
  },
  mounted() { },
  methods: {
    toOut(v) {
      this.$router.push({ path: `/outbound?price=${v}` });
    }
  }
}
</script>

<style lang="less" scoped>
.part {
  padding: 10px 20px;
  margin: 10px auto;
  width: 95%;
  background-color: #87bbf4;

  .title {
    margin-bottom: 10px;
    font-size: 24px;
    color: #000000;
  }

  .list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .single {
      .flex(row, center);
      margin-bottom: 10px;
      width: 18%;
      height: 40px;
      font-size: 18px;
      background-color: #c0c0c0;
      box-shadow: 2px 2px 2px 0 #000000;
      cursor: pointer;

      &.hide {
        opacity: 0.3;
        pointer-events: none;
      }
    }
  }

  .select {
    .flex(row, flex-start);

    .el-select:nth-child(2) {
      margin-left: 30px;
    }

    .price {
      .flex(row, flex-start);

      .price-inner {
        margin: 0 20px 0 50px;
      }

      .button {
        .flex(row, center);
        width: 120px;
        height: 40px;
        color: #000000;
        background-color: #c0c0c0;
        box-shadow: 2px 2px 2px 0 #000000;
        cursor: pointer;
      }
    }
  }
}
</style>